<template>
	<view class="dialog-wrapper" v-if="visible">
		<view class="dialog">
			<view class="dialog-head">
				<view class="dialog-title">添加婚车</view>
				<image class="dialog-header_btn" src="@/static/approval/deletes.png" @click="closeDialog" />
			</view>
			<view class="dialog-main">
				<view class="c-row-box">
					<view class="c-row-item">
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									执行公司
								</view>
								<view class="col-text">
									<picker mode="selector" :range="companyList" range-key="title"
										@change="changeCompany">
										<view>{{ selectedCompany }}</view>
									</picker>
								</view>
							</view>
						</view>

						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									婚车类型
								</view>
								<view class="col-text">
									<picker mode="selector" :range="carTypeList" range-key="title"
										@change="changeCarType">
										<view>{{ isMaster }}</view>
									</picker>
								</view>
							</view>
						</view>

						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									婚车型号
								</view>
								<view class="col-text" @click="showSearchDialog">
									<text>{{ dictionary.getPickerTitle('car', ruleForm.car_id, '请选择') }}</text>
								</view>
							</view>
						</view>

						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									婚车数量
								</view>
								<view class="col-text"><input type="digit" v-model="ruleForm.car_amount"
										placeholder="请输入" /></view>
								<text style="font-size: 12px;">辆</text>
							</view>
						</view>

						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									婚车费用
								</view>
								<view class="col-text"><input type="text" v-model="ruleForm.car_price"
										placeholder="请输入婚车单价" /></view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									服务时长
								</view>
								<view class="col-text"><input type="digit" v-model="ruleForm.service_hour"
										placeholder="请输入" /></view>
								<text style="font-size: 12px;">小时</text>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									服务距离
								</view>
								<view class="col-text"><input type="digit" v-model="ruleForm.service_distance"
										placeholder="请输入" /></view>
								<text style="font-size: 12px;">公里</text>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title" style="padding-left:10px;box-sizing:border-box;">备注</view>
								<view class="col-text"><input v-model="ruleForm.car_remark" placeholder="请输入" /></view>
								<text style="font-size: 12px;"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dialog-footer">
				<button class="c-button c-button-small c-button-primary" @click="submit">确定</button>
				<button class="c-button c-button-small" @click="closeDialog">取消</button>
			</view>
		</view>

		<hs-search :appendToBody="true" :getSelected="getSelected" ref="searchDialog"></hs-search>
	</view>
</template>

<script>
	import Vue from 'vue';
	// import HsSearch from '@/pages/components/search/index.vue';
	import dictionary from '@/utils/dictionary.js';

	const ruleForm = {
		company_id: 0,
		is_master: '', //是否主车  1主车  0跟车
		car_id: 0, //婚车型号
		car_amount: '', //婚车数量
		car_price: '', //婚车单价
		service_hour: '',
		service_distance: '',
		car_remark: '',
		car_total: 0
	};

	export default {
		components: {
			// HsSearch
		},
		inject: ['createOrder'],
		data() {
			return {
				visible: false,
				searchVisible: false,
				ruleForm: Object.assign({}, ruleForm),
				carTypeList: [{
						title: '主车',
						id: 1
					},
					{
						title: '跟车',
						id: 0
					}
				]
			};
		},
		computed: {
			// 获取承办公式列表
			companyList: function() {
				let companyList = dictionary.getPicker('companyList');
				companyList = companyList.filter(ele => ele.is_valid == 1);

				return companyList;

			},
			// 已选择的婚车承办公司
			selectedCompany: function() {
				return dictionary.getPickerTitle('companyList', this.ruleForm.company_id, '请选择');
			},
			// 是否主车
			isMaster: function() {
				// 注意次序，先验证 ''
				if (this.ruleForm.is_master == '') return '请选择';
				if (this.ruleForm.is_master == 0) return '跟车';
				if (this.ruleForm.is_master == 1) return '主车';
				return '请选择';
			}
		},
		beforeMount() {
			this.dictionary = dictionary;
		},
		methods: {
			// 打开弹框
			showDialog() {
				this.visible = true;
				//  初始化信息
				this.ruleForm = Object.assign({}, ruleForm);
			},
			// 取消添加婚车信息
			closeDialog() {
				this.visible = false;
				//  初始化信息
				this.ruleForm = Object.assign({}, ruleForm);
			},

			// 选择公司
			changeCompany(e) {
				let index = e.target.value;
				this.ruleForm.company_id = this.companyList[index].id;
			},

			// 切换婚车类型
			changeCarType(e) {
				let index = e.target.value;
				this.ruleForm.is_master = this.carTypeList[index].id;
			},

			// 显示搜索
			showSearchDialog() {
				this.$refs['searchDialog'].showSearchDialog('car');
			},

			// 获取搜索选择的
			getSelected(item) {
				this.ruleForm.car_id = item.id;
			},

			// 确定添加婚车信息
			submit() {
				if (this.ruleForm.company_id == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择执行公司'
					});
					return;
				}

				if (this.ruleForm.is_master == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择婚车类型'
					});
					return;
				}

				if (this.ruleForm.car_id == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择婚车型号'
					});
					return;
				}

				if (this.ruleForm.car_amount == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择婚车数量'
					});
					return;
				}

				if (this.ruleForm.car_price == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写婚车价格'
					});
					return;
				}

				if (this.ruleForm.service_hour == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写服务时长'
					});
					return;
				}

				if (this.ruleForm.service_distance == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写服务距离'
					});
					return;
				}

				this.ruleForm.car_total = (parseFloat(this.ruleForm.car_amount) * parseFloat(this.ruleForm.car_price))
					.toFixed(2);
				this.createOrder.carParams.push(this.ruleForm);
				// 重算订单总金额
				this.createOrder.getOrderTotals();

				// 关闭初始化信息
				this.visible = false;
				this.ruleForm = Object.assign({}, ruleForm);
			}
		}
	};
</script>

<style lang="less">
	@import url('../../components/common.less');
	@import url('../common/common.less');
</style>